<template>
  <div class="order-tab">
    <div v-for="(tab, index) in tabs" 
      :key="index" 
      :class="{actived: tab.status == curStatus}" 
      :style="{width: width}" 
      @click="onSelectTab(tab.status)">
      {{tab.name}}
      <!-- 订单数量  -->
      <span class="font-c" v-if="tab.status == 10">{{oOrderStatusCount.waitPayCount}}</span>
      <span class="font-c" v-if="tab.status == 20">{{oOrderStatusCount.WaitDelivOrderCount}}</span>
      <span class="font-c" v-if="tab.status == 30">{{oOrderStatusCount.waitGetorderCount}}</span>
      <span class="font-c" v-if="tab.status == 40">{{oOrderStatusCount.waitEvaorderCount}}</span>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex'

  export default {
    data() {
      return {
        tabs: [
          { name: '全部', status: -1 },
          { name: '待付款', status: 10 },
          { name: '待发货', status: 20 },
          { name: '待收货', status: 30 },
          { name: '待评价', status: 40 }
        ]
      }
    },
    methods: {
      ...mapMutations(['selectTabOrderStatus']),
      // 切换tab选项
      onSelectTab(status) {
        this.selectTabOrderStatus(status)
        this.$emit('on-tab', status)
      }
    },
    computed: {
      ...mapGetters(['oOrderStatusCount', 'curStatus']),
      width() {
        return `${100 / this.tabs.length}%`
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../scss/_var.scss';
  .order-tab {
    width: 100%;
    height: 57px;
    border-bottom: 1px solid #ddd;
    line-height: 57px;
    background-color: #fff;
    div {
      display: inline-block;
      text-align: center;
      padding: 0 20px;
      height: 0;
      font-size: 14px;
      cursor: pointer;
      &.actived,
      &:hover {
        text-decoration: none;
        color: #F00384;
      }
    }
  }

  .font-c{
    color: #F00384
  }
</style>